<script setup lang="ts">
import { IconJson } from '@/components/SyIcon/data'
import { Search } from '@element-plus/icons-vue'

interface OnCloseResolveType extends CloseResolveType {
  icon?: string
}
let onCloseResolve = function (_value: OnCloseResolveType) {}
const dialogRef = $ref<DialogInstance>()
const tabActive = $ref('ep:')
const searchVal = $ref('')
const tabList = [
  {
    label: 'Element Plus',
    name: 'ep:',
  },
  {
    label: 'Remix Icon',
    name: 'ri:',
  },
  {
    label: 'Font Awesome 5 Solid',
    name: 'fa-solid:',
  },

]
const iconList = $computed<string[]>(() => {
  const activeTab = tabActive as keyof typeof IconJson
  if (searchVal === '') {
    return IconJson[activeTab]
  }
  else {
    return IconJson[activeTab].filter(item => item.includes(searchVal))
  }
})
const paging = $ref<{
  pageNum: number
  pageSize: number
}>({
  pageNum: 1,
  pageSize: 100,
})
// 打开
async function showDialog() {
  const dialogRes = dialogRef!.openDialog<OnCloseResolveType>({
    title: '选择图标',
    size: 'medium',
  })

  onCloseResolve = dialogRes.onCloseResolve

  return await dialogRes.dialogPrm
}

// 点击图标
function clkIcon(icon: string) {
  onCloseResolve({ type: true, icon: tabActive + icon })
}

// 分页
function paginationChange(pageNum: number, pageSize: number) {
  paging.pageNum = pageNum
  paging.pageSize = pageSize
}

// 取消
function cancel() {
  onCloseResolve({ type: false, icon: undefined })
}

watch(() => tabActive, () => {
  paging.pageNum = 1
})

defineExpose({ showDialog })
</script>

<template>
  <sy-dialog
    ref="dialogRef"
    :before-close="cancel"
  >
    <div
      un-flex="~ col"
      un-h="full"
    >
      <el-tabs
        v-model="tabActive"
        tab-position="top"
      >
        <el-tab-pane
          v-for="tab in tabList"
          :key="tab.name"
          :label="tab.label"
          :name="tab.name"
        />
      </el-tabs>
      <el-input
        v-model="searchVal"
        placeholder="请输入需要搜索的图标(英文)"
      >
        <template #append>
          <el-button>
            <template #icon>
              <el-icon>
                <Search />
              </el-icon>
            </template>
          </el-button>
        </template>
      </el-input>
      <div class="icon-list">
        <div
          v-for="icon in iconList.slice((paging.pageNum - 1) * paging.pageSize, (paging.pageNum - 1) * paging.pageSize + paging.pageSize)"
          :key="icon"
          class="icon-item"
          @click="clkIcon(icon)"
        >
          <sy-icon :icon="tabActive + icon" />
        </div>
      </div>
    </div>
    <template #footer>
      <div un-flex="~ justify-end">
        <el-pagination
          background
          :total="iconList.length"
          :default-page-size="paging.pageSize"
          :default-current-page="paging.pageNum"
          layout="total, prev, pager, next"
          @change="paginationChange"
        />
      </div>
    </template>
  </sy-dialog>
</template>

<style scoped lang="scss">
.icon-list {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  gap: 20px;
  padding: 20px 0;
  .icon-item {
    cursor: pointer;
    font-size: 40px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }
}
</style>
